<html>
	<head>
		<title>My first Three.js app</title>
	</head>
	<body style="background-color: #ffffff;">
		<div>
		    Keyboard event "space" to active audio<br>
		    Keyboard event "Q,W,E,R,A,S,D,F,left,right,up,down" to view position
		</div>
		<div id="canvas">
		    <canvas width="1600" height="18"></canvas>
		</div>
		<script src="js/Detector.js"></script>
		<script src="../build/three.js"></script>
		<script src="../build/THREEx.KeyboardState.js"></script>
		<script src="js/TrackballControls.js"></script>
		<script src="js/stats.min.js"></script>
		<script>
		    
		    if(!Detector.WebGL)Detector.addGetWebGLMessage();
		    
		    var scene, loader, camera, pointLight, particle, renderer, loader;
		    var mesh, controlers, material;
		    var keyboard = new THREEx.KeyboardState();
		    //three colock
            var clock = new THREE.Clock();
		    //audio var
		    var audio, sound;
		    
		    //init function
		    function init(){
		        //get canvas as container
		        var container = document.getElementById( 'canvas' );
		        
		        //program function
                var PI2 = Math.PI * 2;
                var program = function ( context ) {
    
                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.fill();
    
                }
                
                //scene
                scene = new THREE.Scene();
                
		        //camera
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set(0, 0, 15);
                
                //set mouse controller
                controlers = new THREE.TrackballControls( camera );
                controlers.rotateSpeed = 1.0;
                controlers.zoomSpeed = 1.2;
                controlers.panSpeed = 1.0;
                
                controlers.noZoom = false;
                controlers.noPan = false;
                
                controlers.staticMoving = true;
                controlers.dynamicDampingFactor = 0.3
                
                controlers.keys = [605, 803, 980];
                
                controlers.addEventListener( 'change', render );
                
                //load material image
                material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('image/uv.png') } );
                
                
                //load entity from object JS file(JSON format)
                loader = new THREE.JSONLoader();
                loader.load( 'obj/horse.js', function ( geometry ) {
                       
                    //mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } ) );
                    mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x606060, morphTargets: true } ) );
                    mesh.scale.set( 1.5, 1.5, 1.5 );
                    scene.add( mesh );
                } );
                
                //scene.add( mesh );
                
                //Ambient Light setting
                scene.add( new THREE.AmbientLight( 0x00020 ) );
                
                //point light setting
                pointLight = new THREE.PointLight(0xffff00, 1, 10);
                //pointLight.position.set(0, 0, 5);
                scene.add(pointLight);
               
                particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
                particle.scale.x = particle.scale.y = particle.scale.z = 0.5;
                scene.add( particle );
                
		        //renderer setting
		        //renderer = new THREE.CanvasRenderer();
		        renderer = new THREE.WebGLRenderer();
		        renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                
                //stats
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                stats.domElement.style.zIndex = 100;
                container.appendChild( stats.domElement );
                
                //browser windows resert disable
                window.addEventListener( 'resize', onWindowResize, false );
		        
		        renderer.render( scene, camera );
		    }
			
			function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );
                
                controlers.handleResize();

            }
            
            function animate() {

                requestAnimationFrame( animate );
                controlers.update();
                
                render();
                
                stats.update();
            }
			
			var duration = 1000;
            var keyframes = 15, interpolation = duration / keyframes;
            var lastKeyframe = 0, currentKeyframe = 0;
			
			//main function
			function render(){
			    
			    var time = Date.now() * 0.0005;
			    
			    particle.position.x = Math.sin( time * 0.7 ) * 3;
                particle.position.y = Math.cos( time * 0.3 ) * 4;
                particle.position.z = Math.sin( time * 0.5 ) * 3;
			    
			    pointLight.position.x = particle.position.x;
                pointLight.position.y = particle.position.y;
                pointLight.position.z = particle.position.z;
                
                if ( mesh ) {

                    // Alternate morph targets

                    var time = Date.now() % duration;

                    var keyframe = Math.floor( time / interpolation );

                    if ( keyframe != currentKeyframe ) {

                        mesh.morphTargetInfluences[ lastKeyframe ] = 0;
                        mesh.morphTargetInfluences[ currentKeyframe ] = 1;
                        mesh.morphTargetInfluences[ keyframe ] = 0;

                        lastKeyframe = currentKeyframe;
                        currentKeyframe = keyframe;

                        // console.log( mesh.morphTargetInfluences );

                    }

                    mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
                    mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];

                }
			     
			    renderer.render(scene, camera);
			}
			
			init();
			animate();

		</script>
	</body>
</html>